<template>
  <div class="search-criteria">
    <BasicSearchCriteria :api="getCollectLogList" :form-data="formData" :format-form-data="formatFormData">
      <!-- 采集时间 -->
      <a-form-item label="采集时间" name="collectData" :colon="false">
        <a-range-picker
          v-model:value="formData.collectData"
          :value-format="dateFormat"
          class="w-[320px]"
          :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
          @change="handleDateChange"
        />
      </a-form-item>

      <!-- 资源类型 -->
      <a-form-item name="resource_type" class="w-[196px]">
        <a-select
          v-model:value="formData.resource_type"
          :options="RESOURCE_TYPE"
          class="w-[196px]"
          placeholder="全部资源类型"
          :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
        />
      </a-form-item>

      <!-- 内容类型 -->
      <a-form-item name="content_type" class="w-[196px]">
        <a-select
          v-model:value="formData.content_type"
          class="w-[196px]"
          placeholder="全部内容类型"
          :options="CONTENT_TYPE"
          :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
        >
        </a-select>
      </a-form-item>
      <!-- 资源名称 -->
      <a-form-item name="resource_name" class="w-[196px]">
        <a-input v-model:value.trim="formData.resource_name" placeholder="请输入资源名称关键词" class="w-[196px]">
        </a-input>
      </a-form-item>
    </BasicSearchCriteria>
  </div>
</template>

<script lang="ts" setup name="SearchCriteria">
import BasicSearchCriteria from '../../../../components/BasicSearchCriteria.vue'
import { reactive, computed, onUnmounted } from 'vue'
import type { Dayjs } from 'dayjs'
import { RESOURCE_TYPE, CONTENT_TYPE } from '@/stores/modules/collect-manage/select-data-source'
import type { CollectManageRequest } from '@/apis/modules/collectManage'
import apis from '@/apis'
import { formatToUnix } from '@/utils/format'
import mitt from '@/utils/mitt'
const dateFormat = 'YYYY-MM-DD'
// api
const { getCollectLogList } = apis.collectManage

// form
interface FormDataType extends Omit<CollectManageRequest['collectManager.collectLogList'], 'offset' | 'limit'> {
  collectData: number[]
}
let formData = reactive<FormDataType>({
  resource_type: undefined,
  content_type: undefined,
  resource_name: '',
  collectData: [],
  start_time: null,
  end_time: null
})

let formatFormData = computed(() => {
  const { collectData, ...other } = formData
  return {
    ...other
  }
})
//日期
const handleDateChange = (dates: [Dayjs, Dayjs], dateString: string[]) => {
  console.log('dates: ', dates)
  console.log('dateString: ', dateString)
  if (!dates) {
    formData.start_time = undefined
    formData.end_time = undefined
  }
  if (!dateString[0]) return (formData.start_time = undefined)
  formData.start_time = formatToUnix(dateString[0] + '00:00:00')
  if (!dateString[1]) return (formData.end_time = undefined)
  formData.end_time = formatToUnix(dateString[1] + '23:59:59')
  console.log('formData: ', formData)
}
mitt.on('reset-field', () => {
  formData.start_time = undefined
  formData.end_time = undefined
})
onUnmounted(() => {
  mitt.off('reset-field')
})
</script>

<style lang="less" scoped>
.search-criteria {
  .ant-form-inline {
    .ant-form-item {
      margin-right: 0px;
    }
  }
}
</style>
